<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="12">
        <div ref="chart1Ref" style="width: 100%; height: 300px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="chart2Ref" style="width: 100%; height: 300px;"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <div ref="chart3Ref" style="width: 100%; height: 300px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="chart4Ref" style="width: 100%; height: 300px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 定义四个图表的 ref
const chart1Ref = ref(null);
const chart2Ref = ref(null);
const chart3Ref = ref(null);
const chart4Ref = ref(null);

onMounted(() => {
  // 图表 1：每日膳食订单数量折线图
  const chart1 = echarts.init(chart1Ref.value);
  const option1 = {
    title: {
      text: '每日膳食订单数量'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 150, 180, 200, 220, 250, 280],
        type: 'line'
      }
    ]
  };
  chart1.setOption(option1);

  // 图表 2：各类膳食销售占比饼图
  const chart2 = echarts.init(chart2Ref.value);
  const option2 = {
    title: {
      text: '各类膳食销售占比'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '膳食类型',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 300, name: '中餐' },
          { value: 200, name: '西餐' },
          { value: 150, name: '快餐' },
          { value: 100, name: '素食' }
        ]
      }
    ]
  };
  chart2.setOption(option2);

  // 图表 3：不同套餐价格区间订单数量柱状图
  const chart3 = echarts.init(chart3Ref.value);
  const option3 = {
    title: {
      text: '不同套餐价格区间订单数量'
    },
    xAxis: {
      type: 'category',
      data: ['10 - 20 元', '20 - 30 元', '30 - 40 元', '40 - 50 元']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [80, 120, 90, 70],
        type: 'bar'
      }
    ]
  };
  chart3.setOption(option3);

  // 图表 4：每周用户满意度评分趋势图
  const chart4 = echarts.init(chart4Ref.value);
  const option4 = {
    title: {
      text: '每周用户满意度评分趋势'
    },
    xAxis: {
      type: 'category',
      data: ['第 1 周', '第 2 周', '第 3 周', '第 4 周']
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 10
    },
    series: [
      {
        data: [7, 8, 8.5, 9],
        type: 'line'
      }
    ]
  };
  chart4.setOption(option4);
});
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
</style>